<template>
  <button :type="nativeType" :disabled="disabled" :autofocus="autofocus"
          @click="$emit('click',$event)" :class="[
    'yy-button',
    `yy-button--${type}`,
    size && `yy-button--${size}`,
    {'is-plain':plain},
    {'is-round':round},
    {'is-circle':circle},
    {'is-disabled':disabled||loading},
    {'is-loading':loading},
  ]">
    <i v-if="icon&&!loading" class="iconfont" :class="icon"></i>
    <i v-if="loading" class="iconfont icon-loading"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>

<script>
export default {
  name: 'yyButton',
  components: {},
  props: {
    type: {
      type: String,
      default: 'default'
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ""
    },
    autofocus: {
      type: Boolean,
      default: false
    },
    nativeType: {
      type: String,
      default: 'button'
    }
  },
  data () {
    return {}
  },
  methods: {},
  created () { },
  mounted () { }
}
</script>
<style lang="less" scoped>
@import "./index.css";
</style>